<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 40px;
    }

    #box {
        width: 100%;
        height: 1000px;
        background-color: white;
    }

    ul {
        display: block;
        width: 700px;
        height: 430px;
        padding: 40px;
        border-radius:30px;
        border: 1px solid #808080;
        list-style: none;
        margin: 50px auto;
    }
    #head {
        width: 100%;
        height: 130px;
        text-align: center;
        background-color: #007bff;
    }

    .title {
        font-size: 58px;
        color: white;
        line-height: 120px;
    }

    #head a {
        font-size: 50px;
        color: white;
        position: absolute;
        line-height: 120px;
        left: 60px;
        text-decoration: none;
    }
    li {
        height: 80px;
        line-height: 80px;
        padding-left: 30px;
        border-bottom: 1px solid #d3d3d3;

    }

    .right {
        float: right;
        color: #808080;
        padding-right: 60px;
    }
</style>
<script type="text/javascript">
	//页面获取数据
	$(function() {
		refurbishIndex();
		
	});
	function refurbishIndex() {
		$.ajax({
					type : "get",
					url : "/wolist",
					data : {
					},
					async : false,
					success : function(data) {
						var str = "";
						var t=1;
						
						
						for (i in data) {
							
							str += "<ul>"
							    +"<li>"
							    +"第"+(t++)+"次"
							    +"</li>"
							    +"<li>"
							    +"姓名 :<span class='right'>"+data[i].name+"</span>"
							    +"</li>"
							    +"<li>"
                                +"班级 :<span class='right'>"+data[i].classes+"</span>"
							    +"</li>"
							    +"<li>"
                                +"类型 :<span class='right'>"+data[i].type+"</span>"
							    +"</li>"
							    +"<li>"
                                +"预约时间 :<span class='right'>"+data[i].data+"</span>"
							    +"</li>"
								+"</ul>"
						}
						document.getElementById("content").innerHTML = str;
					},
					error:function (data) {
			            alert("请先登陆");
			        }
				});
	}
</script>
<body>
    <div id="#box">
        <div id="head">
            <a href="PersonalCenter">返回</a>
            <span class="title">我的预约</span>
        </div>
        <div id="content">
        </div>

    </div>
</body>

</html>